<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹框</title>
    <link rel="stylesheet" href="static/css/reset.css">
    <link rel="stylesheet" href="static/css/spring-frame.css">
</head>

<body>
    <div class="header">
        <img class="header-img" src="static/imgs/logo.jpg" alt="">
        <div class="header-c">
            <div class="title-left">欢迎注册</div>
            <div class="title-right">已有账号? <strong>请登录</strong></div>
        </div>

    </div>
    <div class="container">
        <div class="container-c">
            <!-- 步骤 -->
            <div class="register-steps">
                <!-- 一步 -->
                <div class="step-one done">
                    <span class="number">
                        1
                    </span>
                    验证手机号
                </div>
                <!-- 线条 -->
                <div class="line done"></div>
                <div class="step-one active">
                    <span class="number">
                        2
                    </span>
                    填写账号信息
                </div>
                <!-- 线条 -->
                <div class="line"></div>
                <div class="step-one">
                    <span class="number">
                        3
                    </span>
                    注册成功
                </div>
            </div>
            <!-- 表单 -->
            <form action="" class="login-form">
                <div class="phone-input-block">
                    <div class="label-title">
                        中国+86
                    </div>
                    <input type="text" class="input-phone">
                </div>
                <div class="btn-verify">
                    点击按钮进行验证
                </div>
                <!-- 按钮 下一步 -->
                <input class="input-btn-next" type="button" value="下一步">
                <div class="com-register">企业用户注册</div>
                <div class="abroad-register">海外用户注册</div>

            </form>
        </div>

    </div>
    <div class="footer">
        <div class="footer-c">
            <img class="footer-logo" src="static/imgs/logo.jpg" alt="">
            <ul class="footer-list">
                <li class="footer-item">
                    <a href="#" class="item-link">门店咨询</a>
                </li>
                <li class="footer-split">|</li>
                <li class="footer-item">
                    <a href="#" class="item-link">网络购物FAQ</a>
                </li>
                <li class="footer-split">|</li>
                <li class="footer-item">
                    <a href="#" class="item-link">关于BALANCE</a>
                </li>
                <li class="footer-split">|</li>
                <li class="footer-item">
                    <a href="#" class="item-link">电子报订阅</a>
                </li>
                <li class="footer-split">|</li>
                <li class="footer-item">
                    <a href="#" class="item-link">买卖定型化契约</a>
                </li>
                <li class="footer-split">|</li>
                <li class="footer-item">
                    <a href="#" class="item-link">政府政令宣传</a>
                </li>
                <p class="last">Copyright © BALANCE Ltd. All rights reserved</p>
            </ul>
            <div class="footer-code">
                <img class="code code-1" src="static/imgs/code1.png" alt="">
                <img class="code code-2" src="static/imgs/code2.png" alt="">
            </div>

        </div>

    </div>
    <div class="mask-dialog">
        <div class="dialog-body">
            <div class="close">
                <img class="close-img" src="static/imgs/close.png" alt="">
            </div>
            <div class="dialog-c">
                <img class="gift-img" src="static/imgs/gift.png" alt="">
                <div class="dialog-text">
                    <p>您已注册成功</p>
                    <p>新用户礼包已放入您的账户</p>
                </div>
                <input class="input-btn-next" type="button" value="下一步">

            </div>
        </div>
    </div>
    

</body>
<script>
    // js 用于点击x关闭弹窗,方便大家查看样式
    var maskDialog = document.querySelector('.mask-dialog');
    var closeBtn = document.querySelector('.mask-dialog .close');
    closeBtn.onclick = function () {
        maskDialog.style.display = 'none';
    }
</script>

</html>